<template>
  <div class="list-page">
    <!-- 顶部搜索和按钮 -->
    <div class="page-header">
      <div class="search-bar">
        <el-input
            v-model="queryForm.listName"
            placeholder="请输入审查清单名称"
            prefix-icon="el-icon-search"
            clearable
            class="search-input"
            @keyup.enter.native="handleSearch"
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    </div>

    <!-- 表格内容 -->
    <div class="table-container">
      <el-table
          :data="tableData"
          style="width: 100%"
          border
          v-loading="loading"
      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="listName"
            label="审查清单名称"
            min-width="200">
        </el-table-column>
        <el-table-column
            prop="count"
            label="规则数量"
            width="120">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="最后修改时间"
            width="180">
        </el-table-column>
        <el-table-column
            label="操作"
            width="250"
            fixed="right">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="handleView(scope.row)">查看详情</el-button>
<!--            <el-button-->
<!--                type="text"-->
<!--                size="small"-->
<!--                @click="handleStartReview(scope.row)">发起审查</el-button>-->
            <el-button
                type="text"
                size="small"
                @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                type="text"
                size="small"
                class="delete-btn"
                @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div>
    </div>

    <!-- 新增/编辑弹窗 -->
    <form-edit
        v-if="formEditVisible"
        ref="formEdit"
        @refreshData="loadData"
    ></form-edit>

    <!-- 详情弹窗 -->
    <info-drawer
        v-if="infoVisible"
        ref="infoDrawer"
    ></info-drawer>
  </div>
</template>

<script>
import { rulelistPage, rulelistDel } from "@/api/rule/list/rulelist.js";
import FormEdit from "./rulelist-edit";
import InfoDrawer from "./rulelist-info";

export default {
  components: {
    "form-edit": FormEdit,
    "info-drawer": InfoDrawer
  },
  data() {
    return {
      loading: false,
      formEditVisible: false,
      infoVisible: false,
      queryForm: {
        listName: '',
        current: 1,
        size: 10
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      tableData: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.page.size = val;
      this.queryForm.size = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.queryForm.current = val;
      this.loadData();
    },
    handleSearch() {
      this.page.current = 1;
      this.queryForm.current = 1;
      this.loadData();
    },
    handleReset() {
      this.queryForm.listName = '';
      this.handleSearch();
    },
    handleAdd() {
      this.formEditVisible = true;
      this.$nextTick(() => {
        this.$refs.formEdit.init();
      });
    },
    handleEdit(row) {
      this.formEditVisible = true;
      this.$nextTick(() => {
        this.$refs.formEdit.init(row.id);
      });
    },
    handleDelete(row) {
      this.$confirm('确认删除该清单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rulelistDel(row.id).then(resp => {
          if (resp.code === 0) {
            this.$message.success('删除成功');
            // 如果是最后一页的最后一条记录，需要跳转到上一页
            const totalPages = Math.ceil((this.page.total - 1) / this.page.size);
            if (this.page.current > totalPages && this.page.current !== 1) {
              this.page.current--;
              this.queryForm.current = this.page.current;
            }
            this.loadData();
          } else {
            this.$message.error(resp.msg || '删除失败');
          }
        });
      }).catch(() => {});
    },
    handleView(row) {
      this.infoVisible = true;
      this.$nextTick(() => {
        this.$refs.infoDrawer.init(row.id);
      });
    },
    handleStartReview(row) {
      this.$router.push({
        path: '/review/create',
        query: { listId: row.id }
      });
    },
    loadData() {
      this.loading = true;
      rulelistPage(this.queryForm).then(resp => {
        this.loading = false;
        if (resp.code === 0) {
          this.tableData = resp.data.records;
          this.page.total = Number(resp.data.total || 0);

          // 如果当前页大于总页数，跳转到最后一页
          const totalPages = Math.ceil(this.page.total / this.page.size);
          if (this.page.current > totalPages && totalPages > 0) {
            this.page.current = totalPages;
            this.queryForm.current = totalPages;
            this.loadData();
          }
        } else {
          this.$message.error(resp.msg || '获取数据失败');
        }
      }).catch(() => {
        this.loading = false;
      });
    }
  },
  created() {
    this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.list-page {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 40px);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .search-bar {
      display: flex;
      align-items: center;
      gap: 10px;

      .search-input {
        width: 300px;
      }
    }
  }

  .table-container {
    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
  }
}

.delete-btn {
  color: #F56C6C;
}

::v-deep .el-table {
  th {
    background-color: #F5F7FA;
    color: #1f2329;
    font-weight: 500;
  }
}
</style>
